const { loaderByName } = require("@craco/craco");
const CracoLessPlugin = require('craco-less');
const path = require('path');
const webpack = require('webpack');
const Dotenv = require("dotenv-webpack");

const lessModuleRegex = /\.module\.less$/;


module.exports = {
  devServer: {
    // port: 3000
    client: {
      overlay: {
        errors: true,
        runtimeErrors: (error) => {
          /**
           * antd组件报错解决 ResizeObserver loop completed with undelivered notifications
           * https://github.com/ant-design/ant-design/issues/26621#issuecomment-1851902543
           */
          if (error.message === 'ResizeObserver loop completed with undelivered notifications.') {
            return false;
          }
          return true;
        },
        warnings: false,
      },
    }
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            /*
            * @primary-color  antd 主题色
            * @themeColor 自定义主题色
            * @menuTextColor 自定义menu文字颜色
            */
            modifyVars: {
              '@primary-color': '#329dff ',
              '@themeColor': '#329dff',
              '@menuTextColor': '#979797'
            },
            // sourceMap: true,
            javascriptEnabled: true,
          },
        },

        // CSS Moudles
        modifyLessModuleRule: (lessModuleRule, context) => {
          lessModuleRule.test = lessModuleRegex;
          // lessModuleRule.exclude = /node_modules|antd\.css/;
          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
          cssLoader.options.modules = {
            localIdentName: "[local]_[hash:base64:5]"
          }

          return lessModuleRule;
        },
      },
    },

  ],
  webpack: {
    // 路径别名
    alias: {
      '@src': path.resolve(__dirname, 'src'),
    },
    plugins: [
      // 因webpack@5不再自动填充process，手动安装`npm i --save-dev process`
      // 参考地址 https://webpack.docschina.org/configuration/resolve/#resolvefallback
      new webpack.ProvidePlugin({
        process: require.resolve('process/browser'),
      }),
      // 注入env
      new Dotenv({
        path: path.join(__dirname, ".env"),
        systemvars: true
      })
    ],
    // 源代码映射
    devtool: false,
  },
};
